<template>
  <div class="hello">
    <van-swipe
      :autoplay="3000"
      :height="'auto'"
      indicator-color="#f1190c"
      class="banner"
    >
      <van-swipe-item
        v-for="(image, index) in topicDetail.banners"
        :key="index"
        @click="go(item)"
      >
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <div class="price">
      <span>¥{{ Number(topicDetail.money).toFixed(2) }}</span>
      <span class="time">距离众筹{{ rents }}截止</span>
    </div>
    <div class="wrap-title">
      <h3>{{ topicDetail.title }}</h3>
      <p>
        {{ topicDetail.desc }}
      </p>
    </div>
    <van-tabs v-model="active">
      <van-tab title="详情描述">
        <div class="bt10"></div>
        <div class="content" v-html="topicDetail.content"></div>
        <div class="bt10"></div>
        <van-tabs v-model="type">
          <van-tab title="众筹中">
            <div class="item" v-for="(item, ind) in lists" :key="ind">
              <div class="item-top">
                <img
                  :src="
                    item.avatar
                      ? item.avatar
                      : 'http://thirdwx.qlogo.cn/mmopen/vi_32/3o08nr4s3JQV967z8KSww3ACroJWKKtkh0OJe4cMeS9DeCn1zv0tdCicFyZu68ibIna1yUxVVf2zeIGVzFMTFKEQ/132'
                  "
                  alt=""
                  class="avatar"
                />
                {{ item.nickname }}
                <div class="btn-group">
                  <div class="btn" @click="share">去推广</div>
                  <div
                    class="btn"
                    v-if="item.openid !== topicDetail.openid"
                    @click="donate(item)"
                  >
                    捐赠
                  </div>
                </div>
              </div>
              <p>
                已筹<span class="money">{{ item.total }}元</span>
                <span class="date">发起于：{{ item.created_at }}</span>
              </p>
              <div class="p">
                支持者 <span class="money">{{ item.num }}</span
                >人
                <div class="imgs">
                  <img
                    v-for="(i, index) in item.list"
                    :key="index"
                    :src="i.avatar"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="已筹满">
            <div class="wrap" v-if="lists.length > 0">
              <div class="item" v-for="(item, ind) in lists" :key="ind">
                <div class="item-top">
                  <img :src="item.avatar" alt="" class="avatar" />
                  {{ item.nickname }}
                </div>
                <p>
                  已筹<span class="money">{{ item.total }}元</span>
                  <span class="date">发起于：{{ item.created_at }}</span>
                </p>
                <div class="p">
                  支持者 <span class="money">{{ item.num }}</span
                  >人
                  <div class="imgs" v-if="item.list.length > 0">
                    <img
                      v-for="(i, index) in item.list"
                      :key="index"
                      :src="i.avatar"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="nodata" v-else>暂无数据</div>
          </van-tab>
          <van-tab title="我的分销">
            <div class="item" v-for="(item, ind) in 20" :key="ind">
              <div class="item-top">
                <img
                  src="http://thirdwx.qlogo.cn/mmopen/vi_32/3o08nr4s3JQV967z8KSww3ACroJWKKtkh0OJe4cMeS9DeCn1zv0tdCicFyZu68ibIna1yUxVVf2zeIGVzFMTFKEQ/132"
                  alt=""
                  class="avatar"
                />
                星光笔
              </div>
              <p>
                已筹<span class="money">2460.35元</span>
                <span class="date">发起于：2020-07-06 08:04:36</span>
              </p>
              <div class="p">
                我的佣金
                <span class="money">20元</span>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </van-tab>
      <van-tab title="报名相关">
        <div class="bt10"></div>
        <div class="item" v-for="(item, ind) in totalArrs" :key="ind">
          <div class="item-top">
            <img :src="item.avatar" alt="" class="avatar" />
            星光笔
          </div>
          <p>
            已筹<span class="money">{{ item.total }}元</span>
            <span class="date">发起于：{{ item.created_at }}</span>
          </p>
          <div class="p">
            支持者 <span class="money">{{ item.num }}</span
            >人
            <div class="imgs" v-if="item.list.length > 0">
              <img
                v-for="(i, index) in item.list"
                :key="index"
                :src="i.avatar"
                alt=""
              />
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="参赛标准">
        <div class="bt10"></div>
        <div class="inners" v-html="topicDetail.rules"></div>
      </van-tab>
    </van-tabs>
    <div class="share-btn" v-if="topicDetail.isjoin" @click.self="goCenter">
      我的
    </div>
    <div class="share-btn" @click.self="goJoin" v-else>参加</div>
    <!-- 参加弹窗 -->
    <div class="mask" v-if="showFlag" @click.self="showFlag = false">
      <div class="mask-content">
        <div class="contents">
          <h1>发起众筹</h1>
          <div class="item">
            <input type="text" placeholder="请输入姓名" v-model="name" />
          </div>
          <div class="item">
            <input type="text" placeholder="请输入手机号" v-model="phone" />
          </div>
          <p>
            <span
              :class="isRead ? 'active' : ''"
              @click="isRead = !isRead"
            ></span>
            请勾选<router-link :to="{ path: '/info', query: { id: 1 } }"
              >《用户须知》</router-link
            >和<router-link :to="{ path: '/tips', query: { id: 1 } }"
              >《众筹相关协议》</router-link
            >
          </p>
          <div class="btns" @click="saveOrder">确定</div>
        </div>
      </div>
    </div>
    <!-- 捐赠弹窗 -->
    <div class="mask" v-if="donateFlag" @click="donateFlag = false">
      <div class="mask-content">
        <div class="contents">
          <h1>为他捐赠</h1>
          <div class="item">
            <input type="text" placeholder="请输入整数金额" v-model="money" />
          </div>
          <p>
            <span
              :class="isRead ? 'active' : ''"
              @click="isRead = !isRead"
            ></span>
            请勾选<router-link :to="{ path: '/info', query: { id: id } }"
              >《用户须知》</router-link
            >和<router-link :to="{ path: '/tips', query: { id: id } }"
              >《众筹相关协议》</router-link
            >
          </p>
          <div class="btns" @click="doOrder">确定</div>
        </div>
      </div>
    </div>
    <!-- 非微信环境 -->
    <div class="mask" v-if="openWx" @click="openWx = false">
      <div class="mask-content">
        <div class="contents">
          <h1>去微信分享</h1>
          <p>请复制路径在微信环境中打开，再去分享吧</p>
        </div>
      </div>
    </div>
    <!-- 个人分享页面 -->
    <div class="mask" v-if="showShare" @click="showShare = false">
      <div class="mask-content">
        <div class="contents">
          <h1>个人专属分享</h1>
          <p>您的专属分享已经生成了，请选择“···”右上角的去体验吧!</p>
          <div class="btn" @click.slef="showShare = false">我知道了</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "pay",
  data() {
    return {
      totalArrs: [],
      showFlag: false,
      showShare: false,
      openWx: false,
      donateFlag: false,
      money: "",
      isRead: false,
      rents: "",
      hour: 0,
      min: 0,
      sec: 0,
      bannerList: [
        "https://img.yzcdn.cn/vant/apple-1.jpg",
        "https://img.yzcdn.cn/vant/apple-2.jpg",
      ],
      status: "1",
      id: "",
      active: 0,
      type: 0,
      name: "",
      id_card: "",
      phone: "",
      topicDetail: "",
      token: "",
      lists: [],
    };
  },
  watch: {
    active(val) {
      if (val == 1) {
        this.getTotal();
      }
    },
    type(val) {
      if (val == 0) {
        this.getOrder(val + 1);
      }
      if (val == 1) {
        this.getOrder(4);
      }
      if (val == 2) {
      }
    },
  },
  mounted() {
    this.id = this.$route.query.id;
    this.api_token = this.$route.query.api_token;
    if (!this.api_token) {
      window.location.href =
        "https://www.shenhaijiyuan.com/api/get_login?p=w&id=" +
        this.$route.query.id;
    } else {
      localStorage.api_token = this.api_token;
    }
    this.getData();
    this.getOrder(this.type + 1);
  },
  methods: {
    getTotal() {
      this.$api
        .getTotal({
          p: "w",
          id: this.id,
        })
        .then((res) => {
          this.totalArrs = res.data;
        });
    },
    goJoin() {
      let token = localStorage.api_token;
      if (!token) {
        window.location.href =
          "https://www.shenhaijiyuan.com/api/get_login?p=w&id=" +
          this.$route.query.id;
        return false;
      }
      this.showFlag = true;
    },
    goCenter() {
      this.$router.push({
        path: "/center",
        query: {
          id: this.id,
        },
      });
    },
    getOrder(type) {
      this.$api
        .getOrder({
          p: "w",
          id: this.id,
          type: type,
        })
        .then((res) => {
          this.lists = res.data;
        });
    },
    getData() {
      this.$api
        .getTopicDetail({ id: this.id, p: "w", api_token: this.api_token })
        .then((res) => {
          this.topicDetail = res.data;
          let s2 = new Date();
          let end = new Date(res.data.end_date * 1000);
          let timestamp = parseInt((end.getTime() - s2.getTime()) / 1000);
          this.timestampToTime(timestamp);
          this.timer = setInterval(() => {
            let s2 = new Date();
            let end = new Date(res.data.end_date * 1000);
            let timestamp = parseInt((end.getTime() - s2.getTime()) / 1000);
            this.timestampToTime(timestamp);
          }, 1000);
        });
    },
    // 时间戳转字符串
    timestampToTime(runTime) {
      var day = Math.floor(runTime / 86400);
      runTime = runTime % 86400;
      day = day < 10 ? "0" + day : day;
      var hour = Math.floor(runTime / 3600);
      hour = hour < 10 ? "0" + hour : hour;
      runTime = runTime % 3600;
      var minute = Math.floor(runTime / 60);
      minute = minute < 10 ? "0" + minute : minute;
      runTime = runTime % 60;
      var second = runTime;
      second = second < 10 ? "0" + second : second;
      if (day !== "00") {
        this.rents = day + "天" + hour + ":" + minute + ":" + second;
      } else {
        this.rents = hour + ":" + minute + ":" + second;
      }
    },
    donate(item) {
      this.donateFlag = true;
      this.info = item;
    },
    doOrder() {
      if (this.money == "") {
        return Toast("请填写金额");
      }
      if (!/[1-9]+/.test(this.money)) {
        return Toast("请输入1-9数字");
      }
      if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
          document.addEventListener(
            "WeixinJSBridgeReady",
            onBridgeReady,
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
          document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
        }
      } else {
        this.onBridgeReady();
      }
    },
    onBridgeReady(appId,timeStamp,nonceStr,package){
      WeixinJSBridge.invoke(
      'getBrandWCPayRequest', {
         "appId":"wx2421b1c4370ec43b",     //公众号名称，由商户传入     
         "timeStamp":"1395712654",         //时间戳，自1970年以来的秒数     
         "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串     
         "package":"prepay_id=u802345jgfjsdfgsdg888",     
         "signType":"MD5",         //微信签名方式：     
         "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 
      },
      function(res){
      if(res.err_msg == "get_brand_wcpay_request:ok" ){
      // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
      })
      
    },
    saveOrder() {
      if (this.name == "") {
        return Toast("请填写姓名");
      }
      this.$api
        .join({
          p: "w",
          id: this.$route.query.id,
          api_token: this.api_token,
        })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            Toast("参加成功");
            localStorage.data = JSON.stringify(res.data);
            this.$router.push({
              path: "/myJoin",
            });
          } else {
            Toast(res.msg);
          }
        });
    },
    share() {
      var ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        var url = location.href;
        this.setShare(url);
      } else {
        this.openWx = true;
      }
    },
    setShare(url) {
      var that = this;
      this.$api.getConfig({ p: "w", url: window.location.href }).then((res) => {
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: res.appid, // 必填，公众号的唯一标识
          timestamp: res.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.nonceStr, // 必填，生成签名的随机串
          signature: res.signature, // 必填，签名，见附录1
          jsApiList: [
            "checkJsApi",
            "updateAppMessageShareData",
            "updateTimelineShareData",
          ], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        console.log(that.topicDetail.shareInfo);
        let title = that.topicDetail.shareInfo.title;
        let imgUrl = that.topicDetail.shareInfo.img;
        let desc = that.topicDetail.shareInfo.desc;
        wx.ready(function () {
          wx.updateAppMessageShareData({
            title: title, // 分享标题
            desc: desc,
            link: url, // 分享链接,将当前登录用户转为puid,以便于发展下线
            imgUrl: imgUrl, // 分享图标
            success: function () {
              console.log(ok);
              // 用户确认分享后执行的回调函数
              //alert("分享成功");
            },
            cancel: function () {
              // 用户取消分享后执行的回调函数
            },
          });
          wx.onMenuShareAppMessage({
            title: title, // 分享标题
            desc: desc,
            link: url, // 分享链接,将当前登录用户转为puid,以便于发展下线
            imgUrl: imgUrl,
            success: function (res) {},
            cancel: function (res) {},
            fail: function (res) {},
          });
          this.showShare = true;
        });
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  scoped>
.hello {
  padding-bottom: 60px;
}
.loading {
  position: relative;
}
.loading:after {
  content: "";
  width: 100%;
  height: 100vh;
  position: fixed;
  background: #fff;
  z-index: 1200;
  top: 0;
  left: 0;
}
.banner {
  height: auto;
  min-height: 160px;
}
.banner img {
  width: 100%;
  height: auto;
}
.bt10 {
  height: 10px;
  width: 100%;
}
.price {
  height: 60px;
  line-height: 60px;
  padding: 0 20px;
  background: red;
  color: #fff;
  font-weight: bold;
}
.price span {
  font-size: 22px;
}
.price .time {
  background: #000000;
  line-height: 20px;
  font-size: 14px;
  padding-top: 10px;
  padding-right: 10px;
  margin-right: -20px;
  text-align: right;
  display: block;
  float: right;
  width: 100px;
  height: 60px;
  box-sizing: border-box;
  position: relative;
}
.time:after {
  content: "";
  position: absolute;
  top: 0%;
  left: -59px;
  transform: rotate(90deg);
  z-index: 1;
  border-top: 30px solid #000;
  border-bottom: 30px solid transparent;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
}
.wrap-title {
  background: #fff;
  padding: 20px 15px;
}
.wrap-title h3 {
  color: #333333;
  font-weight: 500;
  line-height: 20px;
  font-size: 16px;
  margin: 0;
  padding: 0;
}
.wrap-title p {
  font-size: 12px;
  color: #999;
  margin: 5px 0 0;
}
.content {
  width: 100%;
}
.content img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.item {
  background: #fff;
  padding: 10px 10px;
  margin-bottom: 10px;
}
.item-top {
  color: #000;
  font-size: 16px;
  vertical-align: middle;
  position: relative;
  display: flex;
}
.btn-group {
  flex: 1;
  text-align: right;
}
.btn {
  border-radius: 14px;
  padding: 5px 15px;
  text-align: center;
  font-size: 14px;
  color: #fff;
  display: inline-block;
  background: #cc1c24;
}
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 15px;
}
.item p,
.item .p {
  color: #333;
  font-size: 14px;
  overflow: hidden;
}
.item .date {
  display: block;
  float: right;
}
.money {
  color: #cc1c24;
}
.imgs {
  float: right;
  margin-right: -18px;
}
.imgs img {
  width: 24px;
  height: 24px;
  display: block;
  float: left;
  margin: 0 5px;
  border-radius: 50%;
  vertical-align: middle;
}
.inners {
  background: #fff;
  padding: 10px 15px;
}
.inners p {
  color: #666;
  font-size: 14px;
  margin: 0;
  line-height: 20pxs;
}
.share-btn {
  height: 60px;
  line-height: 60px;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 18px;
  color: #ffffff;
  background: #cc1c24;
}
.contents {
  padding: 0 20px;
  overflow: hidden;
}
.contents h1 {
  font-size: 16px;
  text-align: center;
}
.contents .item {
  margin-bottom: 0;
}
.contents input {
  display: block;
  border: 1px solid #999999;
  width: 90%;
  margin: 0 auto;
  height: 25px;
  font-size: 14px;
  border-radius: 3px;
  padding-left: 5px;
}
.contents p {
  font-size: 12px;
  text-align: center;
  line-height: 14px;
  vertical-align: middle;
}
.contents p span {
  width: 10px;
  height: 10px;
  border: 1px solid #9999;
  display: inline-block;
  border-radius: 50%;
  line-height: 12px;
}
.contents p span.active {
  position: relative;
}
.contents span.active:after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  background: #cc1c24;
  transform: translate(-50%, -50%);
}
.contents a {
  color: #cc1c24;
}
.btns {
  width: 140px;
  text-align: center;
  height: 35px;
  line-height: 35px;
  border-radius: 4px;
  background: #cc1c24;
  color: #fff;
  margin: 5px auto 20px;
}
</style>
